<script type="text/javascript">
var lomba_edit;
var lomba_delete;
var lomba_poster_temp;
$(document).ready(function(){
/* Start Variable Declaration */
    var lomba_source;
    var lomba_adapter;
    var lomba_buttonAdd;
    var lomba_searchField;
    var lomba_expander=$('#lomba_expander');
    var lomba_save=$("#lomba_save");
    var lomba_reset=$("#lomba_reset");
    var lomba_grid=$('#lomba_grid');
/* Form Component Declaration */
    $('.inputfield').jqxInput({ theme : global_theme });
    lomba_expander.jqxExpander({width: '100%', theme : global_theme, toggleMode : 'none', expanded : false});
    
	$("#lomba_semester").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
		selectedIndex: 0,
        source: new Array('Ganjil','Genap')
    });
	$("#lomba_tahunajar").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
		selectedIndex: 0,
        source: new Array('2014/2015', '2015/2016', '2016/2017', '2017/2018', '2018/2019', '2019/2020')
    });
	$("#lomba_level_id").jqxComboBox({
        width: 200,
        height: 25,
		autoDropDownHeight : true,
        displayMember: "level_nama",
        valueMember: "level_id",
		placeHolder: "Pilih salah satu",
        source: new $.jqx.dataAdapter({
            datatype: "json",
            root : 'results',
            datafields: [
                { name: 'level_id' },
                { name: 'level_nama' }
				
            ],
            url: "index.php/c_level/get_list"
        })
    });
	
	$("#lomba_tanggal").jqxDateTimeInput({ height: '25px', formatString : 'dd-MM-yyyy' });
	
    lomba_save.jqxButton();
    lomba_save.bind('click', function(e){ lomba_save_form(e); });
    lomba_reset.jqxButton();
    lomba_reset.bind('click', lomba_reset_form);
    
/* Grid And Toolbar Declaration */
    lomba_source={
        id : 'lomba_id',
        url : 'index.php/c_lomba/get_list',
        datatype : 'json',
        root : 'results',
		data : {search_text : ''},
        datafields : [
            { name : 'lomba_id' },
            { name : 'lomba_judul' },
            { name : 'lomba_tanggal' },
            { name : 'lomba_deskripsi' },
            { name : 'lomba_cp' },
            { name : 'lomba_cp_no' },
            { name : 'lomba_tahunajar' },
            { name : 'lomba_semester' },
            { name : 'lomba_level_id' },
            { name : 'lomba_poster' },
            { name : 'level_nama' }
        ],
        beforeprocessing : function(data){
            lomba_source.totalrecords = data[0].total;
        }
    }
    lomba_adapter = new $.jqx.dataAdapter(lomba_source);
    
	lomba_buttonAdd = $("<button style='margin-left: 5px;'><img src='assets/images/icons/add.png'> Tambah Data</button>");
    lomba_buttonAdd.jqxButton({ width : 120 });
    lomba_buttonAdd.bind('click', function(){ lomba_expander.jqxExpander('expand'); });
    lomba_searchField = $('<input type="text" class="inputfield" name="lomba_search" placeholder="Pencarian">');
    lomba_searchField.jqxInput({ theme : global_theme });
    lomba_grid.jqxGrid({
        source : lomba_adapter,
        width : '100%',
        theme : global_theme,
        pagesize : 15,
        pagesizeoptions : [15],
        sortable : true,
		pageable: true,
        filterable : true,
        columnsresize : true,
        autoheight : true,
        virtualmode : true,
        showtoolbar: true,
        rendertoolbar: function (toolbar) {
            var me = this;
            var container = $("<div style='margin: 5px;'></div>");
            container.append(lomba_buttonAdd);
            container.append(' | ');
            container.append(lomba_searchField);
            toolbar.append(container);
        },
        rendergridrows : function(){
            return lomba_adapter.records;
        },
        columns : [
            { text : 'Id', dataField : 'lomba_id', hidden : true },
            { text : 'Judul', dataField : 'lomba_judul', width : '25%' },
            { text : 'Tanggal', dataField : 'lomba_tanggal', width : '10%' },
            { text : 'Panitia', dataField : 'lomba_cp', width : '20%' },
            { text : 'Telp. Panitia', dataField : 'lomba_cp_no', width : '15%' },
            { text : 'Tahun Ajar', dataField : 'lomba_tahunajar', width : '20%', hidden : true },
            { text : 'Semester', dataField : 'lomba_semester', width : '20%', hidden : true },
            { text : 'Level', dataField : 'level_nama', width : '20%' },
			{ text : '&nbsp;', width: '5%', cellsrenderer : function(row){
					var record = lomba_grid.jqxGrid('getrowdata', row);
					var id = record.lomba_id;
					return '<img src="assets/images/icons/edit.png" onClick="lomba_edit(event, ' + id + ')" title="Ubah Data" style="margin:2px 7px 2px 7px;"/>';
				}
			},
			{ text : '&nbsp;', width: '5%', cellsrenderer : function(row){
					var record = lomba_grid.jqxGrid('getrowdata', row);
					var id = record.lomba_id;
					return '<img src="assets/images/icons/delete.png" onClick="lomba_delete(event, ' + id + ')" title="Hapus Data" style="margin:2px 7px 2px 7px;"/>';
				}
			}
        ]
    });
/* Function Declaration */
    function lomba_reset_form(){
        lomba_expander.jqxExpander('collapse');
    }
    function lomba_save_form(e){
        e.preventDefault();
        var params = new Object();
        params.lomba_id=$('#lomba_id').val();
        params.form_data=$('#lomba_form').serializeObject();
		params.form_data.lomba_tanggal=$("#lomba_tanggal").jqxDateTimeInput('val');
		params.form_data.lomba_semester=$("#lomba_semester").jqxComboBox('val');
		params.form_data.lomba_level_id=$("#lomba_level_id").jqxComboBox('val');
        params=JSON.stringify(params);
        $.ajax({
            url : 'c_lomba/save',
            method : 'post',
            data : {params:params},
            success : function(response){
				$('#lomba_poster').bind('fileuploadsubmit', function (e, data) {
					var input = $('#input');
					data.formData = {filename : response};
				});
				lomba_poster_temp.submit();
                lomba_grid.jqxGrid('updatebounddata');
                $.global_show_notif(MSAVE_SUCCESS,'success');
                lomba_reset.click();
            }
        });
    }
	lomba_edit = function(e, lomba_id){
		var rowindex = lomba_grid.jqxGrid('getselectedrowindex');
		var data_record = lomba_grid.jqxGrid('getrowdata', rowindex);
		$("#lomba_form").unserializeObject(data_record);
		$("#lomba_deskripsi").text(data_record.lomba_deskripsi);
		lomba_expander.jqxExpander('expand');
	};
	lomba_delete = function(e, lomba_id){
		var rowindex = lomba_grid.jqxGrid('getselectedrowindex');
		var data_record = lomba_grid.jqxGrid('getrowdata', rowindex);
		$.global_show_confirm('Peringatan',MCONFIRM_DELETE);
		$("#confirm_window_ok").click(function(){
			var process = $.global_show_processing();
			$.ajax({
				url : 'c_lomba/delete',
				method : 'post',
				data : {lomba_id:lomba_id},
				success : function(response){
					process.hide();
					var res = $.parseJSON(response);
					lomba_grid.jqxGrid('updatebounddata');
					$.global_show_notif(MSAVE_SUCCESS,'success');
					lomba_reset.click();
				}
			});
		});
	};
	lomba_searchField.on('keydown', function(e){
		if(e.keyCode == 13){
			lomba_source['data']['search_text'] = $(this).val();
			lomba_grid.jqxGrid('gotopage',0);
			lomba_grid.jqxGrid('updatebounddata');
		}
	});
	$('#lomba_poster').fileupload({
        dataType: 'json',
		formData : { filename : 'asdasd' },
        add: function (e, data) {
			lomba_poster_temp = data;
        },
		done : function(cmp, res, d){
			var name = res.result.files[0].name;
			$.ajax({
				url : 'c_lomba/update_poster_lomba',
				method : 'post',
				data : {params:name}
			});
		}
    });
});
</script>
<div>
    <div id="lomba_expander" style="padding-bottom : 10px;">
        <div>Form Kompetisi</div>
        <div>
            <form class="form-horizontal" id="lomba_form" style="padding:10px;overflow:hidden;">
                <input type="hidden" id="lomba_id" name="lomba_id">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Judul Kompetisi</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="lomba_judul" placeHolder= "Judul Kompetisi"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Tanggal</label>
                    <div class="col-sm-4"><div name="lomba_tanggal" id="lomba_tanggal"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Deskripsi</label>
                    <div class="col-sm-4"><textarea class="inputfield" name="lomba_deskripsi" id="lomba_deskripsi" style="height:70px;"></textarea></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Instansi</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="lomba_cp" placeHolder= "Instansi Penyelenggara Lomba"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Telp. Instansi</label>
                    <div class="col-sm-4"><input type="text" class="inputfield" name="lomba_cp_no" placeHolder= "Telp. Instansi Penyelenggara"></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Tahun Ajar</label>
                    <div class="col-sm-4"><div name="lomba_tahunajar" id="lomba_tahunajar"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Semester</label>
                    <div class="col-sm-4"><div name="lomba_semester" id="lomba_semester"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Level</label>
                    <div class="col-sm-4"><div name="lomba_level_id" id="lomba_level_id"></div></div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Poster</label>
                    <div class="col-sm-4"><input id="lomba_poster" type="file" name="files" data-url="c_lomba/upload_poster"><div id="lomba_upload"></div></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-4 text-center">
                        <button type="button" id="lomba_save">Simpan</button>
                        <button type="reset" id="lomba_reset">Batal</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="lomba_grid"></div>
</div>